<template>
 <div style="width: 100%;height: 100%;border-radius: 10px 0 0 0;overflow: hidden;"
  :style="{
    backgroundColor:appData.isDarkMode?'black':'white'
  }"
 >
  <div style="width: 100%;height: 420px;position: relative;background-position: center;background-size: cover;background-repeat: no-repeat;padding-left: 40px;padding-top: 64px;font-size: 15px;"
      :style="{
        backgroundImage:appData.isDarkMode?getImageURL('file-1707105665561-147318345.png'):getImageURL('file-1707105662869-36372507.png')
      }"
  >
     <p style="background-color: transparent;color: var(--color-neutral-10);">服务器时间 <span>{{ data.all }}</span></p>
      <p style="font-size: 36px;font-weight:500;color: var(--color-neutral-10);">志愿助手数据库管理系统</p>
      <div style="width: 100%;height: 150px;position: absolute;left: 0;bottom: 0;background-position: center;background-size: contain;background-repeat: repeat-x;"
        :style="{
          backgroundImage:appData.isDarkMode?getImageURL('file-1707105667741-302252866.png'):getImageURL('file-1707105669602-952457366.png')
        }"
      >
        
      </div>
      <div id="nav-button-wrapper" style="width: 100%;height: 230px;position: absolute;left: 0;bottom: 0;overflow-x: hidden;padding-left: 40px;overflow-y: hidden;"
        
      >
        
        <div @click="leftMove" v-if="data.scrollData.marginLeft!=0" class="ctrlButton" style="left: 10px;">
          <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path d="M30.311 6.604C30.948 6 32 6.451 32 7.33v33.342c0 .878-1.052 1.33-1.689.725L12.763 24.725a1 1 0 010-1.45l17.548-16.67z" fill="currentColor"/></svg>
        </div>
                
        <div @click="rightMove" v-if="getScrollWidth()!=0" class="ctrlButton" style="right: 10px;">
          <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path d="M16 9.162a1 1 0 011.648-.762l17.456 14.838a1 1 0 010 1.524L17.648 39.599A1 1 0 0116 38.838V9.162z" fill="currentColor"/></svg>
        </div>
        
        <div style="width: 4370px;display: inline-block;transition: margin-left .5s cubic-bezier(0.23, 1, 0.320, 1)"
        :style="{
          marginLeft: data.scrollData.marginLeft.toString() + 'px'
        }"
        >
          <div @click="navOpenLink(item.link);changePageNavButton()" v-for="item in data.navButtons" class="nav-button">
            <div class="nav-button-inside">
              
            </div>
            <div class="nav-button-inside" style="opacity: 1;background-color: transparent;">
              <span style="color: var(--color-neutral-10);" v-html="item.icon"></span>
              <p style="margin-top: 10px;font-size: 20px;color: var(--color-neutral-10);">{{ item.title }}</p>
              <p style="margin-top: 5px;font-size: 12px;color: var(--color-neutral-7);">{{ item.subTitle }}</p>
              <svg style="position: absolute;right: 15px;bottom: 15px;color: var(--color-neutral-10);" width="20" height="20" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 6v4H6v28h36V28h4v12.2c0 .994-.985 1.8-2.2 1.8H4.2C2.985 42 2 41.194 2 40.2V7.8C2 6.806 2.985 6 4.2 6H24zm20 0a2 2 0 012 2v14h-4v-9.172l-11.95 11.95a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L39.17 9.999 30 10V6h14z" fill="currentColor"/></svg>
            </div>
          </div>
        </div>
      </div>
  </div>
 </div>
</template>

<script>
import axios from 'axios'
import tool, {decodeString} from '@/utlis/tool'
import config from "@/config";
import router from '@/router';

export default{
  data(){
    return{
      data:{
        hhmmss:'',
        yyyymmdd:'',
        allowWSMsg:true,
        navButtons:[
          {
            icon:'<svg width="60" height="60" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 3c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10S18.477 3 24 3zm18 35c0-7.714-6.477-12-12-12H18c-5.523 0-12 4.292-12 12v6a2 2 0 002 2h32a2 2 0 002-2v-6zm-12-8c3.742 0 8 2.956 8 8v4H10v-4c0-5.188 4.34-8 8-8h12zM18 13a6 6 0 1112 0 6 6 0 01-12 0z" fill="currentColor"/></svg>',
            title:'账号管理',
            subTitle:'修改考生账号信息和添加咨询师账号',
            link:'/account'
          },
          {
            icon:'<svg width="60" height="60" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M34 12a2 2 0 012 2v28a2 2 0 01-2 2H6a2 2 0 01-2-2V14a2 2 0 012-2h28zm-2 4H8v24h24V16zm-4.119 10.366a.8.8 0 01.235.565V35.4a.6.6 0 01-.6.6H23.51l.012.011H12.689a.6.6 0 01-.424-1.024l4.442-4.443a.8.8 0 011.12-.01l2.423 2.331 6.5-6.5a.8.8 0 011.131 0zM42 4a2 2 0 012 2v25a1 1 0 01-1 1h-2a1 1 0 01-1-1V8H17a1 1 0 01-1-1V5a1 1 0 011-1h25zM18 20v6h-6v-6h6z" fill="currentColor"/></svg>',
            title:'轮播图管理',
            subTitle:'添加、删除和修改轮播图',
            link:'/banner'
          },
          {
            icon:'<svg width="60" height="60" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M41 4a1 1 0 00-1-1H8a1 1 0 00-1 1v38.232a2 2 0 002.628 1.9L24 39.38l14.372 4.751A1.999 1.999 0 0041 42.232V4zm-30.5 9h27v27.157L24 35.693l-13.5 4.464V13zm13.943 3.363a1 1 0 01.454.454l2.042 4.138 4.566.664a1 1 0 01.555 1.705l-3.305 3.221.78 4.548a1 1 0 01-1.45 1.054L24 30l-4.084 2.147a1 1 0 01-1.451-1.054l.78-4.548-3.305-3.22a1 1 0 01.555-1.706l4.566-.664 2.042-4.138a1 1 0 011.34-.454zM10.5 6.5h27V9h-27V6.5z" fill="currentColor"/></svg>',
            title:'一分一段表管理',
            subTitle:'导入、清空和查看各省一分一段表',
            link:'/scoreRanks'
          },
          {
            icon:'<svg width="60" height="60" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M34 12a2 2 0 012 2v28a2 2 0 01-2 2H6a2 2 0 01-2-2V14a2 2 0 012-2h28zm-2 4H8v24h24V16zM42 4a2 2 0 012 2v26h-4V8H16V4h26zM28 30a1 1 0 011 1v2a1 1 0 01-1 1H12a1 1 0 01-1-1v-2a1 1 0 011-1h16zm-9-8a1 1 0 011 1v2a1 1 0 01-1 1h-7a1 1 0 01-1-1v-2a1 1 0 011-1h7z" fill="currentColor"/></svg>',
            title:'志愿表管理',
            subTitle:'导入、清空、查找和编辑志愿信息',
            link:'/volunteer'
          },
          {
            icon:'<svg width="60" height="60" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M22.432 1.914l.103.056 21 13.281a1 1 0 01.457.718l.008.127V46a1 1 0 01-.883.993L43 47H5a1 1 0 01-.993-.883L4 46V25.118a1 1 0 01.445-.832l.108-.062L21 15.999V2.816a1 1 0 01.1-.436l.055-.099a1 1 0 011.277-.367zM25 8.262V43h6v-6.281a1 1 0 011-1h3a1 1 0 011 1v6.28L40 43V17.749L25 8.262zM8 26.972l13-6.5V43H8V26.972z" fill="currentColor"/></svg>',
            title:'学校信息管理',
            subTitle:'导入、清空、查找和编辑学校信息',
            link:'/school'
          },
          {
            icon:'<svg width="60" height="60" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M42.937 10.952L24.922 2.407a2 2 0 00-1.715 0L5.22 10.951a2 2 0 00-1.141 1.807V35.22a2 2 0 001.14 1.806l17.985 8.564a2 2 0 001.719 0l18.014-8.565a2 2 0 001.142-1.806V12.759a2 2 0 00-1.143-1.807zM8.08 33.958V16.894l13.849 6.951.036.019.256 16.827L8.08 33.958zm32-17.068l-13.977 6.962-.136.062.252 16.632 13.86-6.59V16.89zM9.72 13.24l14.346-6.812 14.366 6.813-14.113 7.03a.666.666 0 01-.596 0L9.721 13.24z" fill="currentColor"/></svg>',
            title:'专业信息管理',
            subTitle:'导入、清空、查找和编辑专业信息',
            link:'/special'
          },
          {
            icon:'<svg width="60" height="60" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M42.937 10.952L24.922 2.407a2 2 0 00-1.715 0L5.22 10.951a2 2 0 00-1.141 1.807V35.22a2 2 0 001.14 1.806l17.985 8.564a2 2 0 001.719 0l18.014-8.565a2 2 0 001.142-1.806V12.759a2 2 0 00-1.143-1.807zM8.08 33.958V16.894l13.849 6.951.036.019.256 16.827L8.08 33.958zm32-17.068l-13.977 6.962-.136.062.252 16.632 13.86-6.59V16.89zM9.72 13.24l14.346-6.812 14.366 6.813-14.113 7.03a.666.666 0 01-.596 0L9.721 13.24z" fill="currentColor"/></svg>',
            title:'学校开设专业信息管理',
            subTitle:'导入、清空、查找和编辑学校开设专业信息',
            link:'/schoolSpecial'
          },
          {
            icon:'<svg width="60" height="60" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.095 6h39.81C45.062 6 46 6.895 46 8v32c0 1.105-.938 2-2.095 2H4.095C2.938 42 2 41.105 2 40V8c0-1.105.938-2 2.095-2zM6 10v6h36v-6H6zm0 28V20h36v18H6zm5-8a1 1 0 00-1 1v2a1 1 0 001 1h10a1 1 0 001-1v-2a1 1 0 00-1-1H11z" fill="currentColor"/></svg>',
            title:'收费管理',
            subTitle:'导入、编辑和删除卡信息',
            link:'/card'
          },
          {
            icon:'<svg width="60" height="60" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M41.667 5C42.955 5 44 5.895 44 7v34c0 1.105-1.045 2-2.333 2H6.333C5.045 43 4 42.105 4 41V7c0-1.105 1.045-2 2.333-2h35.334zM14 32H8v7h6v-7zm26 0H18v7h22v-7zM14 20H8v8h6v-8zm26 0H18v8h22v-8zM14 9H8v7h6V9zm26 0H18v7h22V9z" fill="currentColor"/></svg>',
            title:'操作数据库',
            subTitle:'选择操作方法、输入操作数据和查看结果',
            link:'/dbOperator'
          },
          {
            icon:'<svg width="60" height="60" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M28.767 2.71A21.685 21.685 0 0024 2.182c-1.618 0-3.215.178-4.768.528l-.897.202-2.795 6.373-6.883-.752-.622.677a21.82 21.82 0 00-4.772 8.295l-.27.872L7.089 24 3.53 28.886l-.537.737.27.872a21.82 21.82 0 004.772 8.295l.622.677 6.883-.752 2.426 5.531.369.842.896.202c1.554.35 3.15.528 4.769.528 1.618 0 3.214-.178 4.767-.528l.897-.201 2.796-6.374 6.883.752.622-.677a21.82 21.82 0 004.771-8.294l.27-.871L40.912 24l3.559-4.887.537-.738-.27-.87a21.82 21.82 0 00-4.772-8.295l-.622-.677-6.883.752-2.796-6.373-.897-.202zM20.916 6.08A18.109 18.109 0 0124 5.818c1.043 0 2.073.089 3.084.263l2.24 5.109a2.976 2.976 0 003.05 1.763l5.507-.603a18.182 18.182 0 013.096 5.382l-3.289 4.516a2.976 2.976 0 000 3.504l3.289 4.516a18.182 18.182 0 01-3.096 5.382l-5.508-.603a2.976 2.976 0 00-3.049 1.763l-2.24 5.109c-1.011.174-2.041.263-3.084.263-1.043 0-2.073-.089-3.084-.263l-2.24-5.108a2.976 2.976 0 00-3.05-1.764l-5.508.603a18.185 18.185 0 01-3.095-5.383l3.289-4.515c.76-1.044.76-2.46 0-3.504l-3.29-4.515a18.186 18.186 0 013.096-5.383l5.509.603a2.976 2.976 0 003.049-1.763l2.24-5.109zM24 14.91c5.004 0 9.056 4.072 9.056 9.091 0 5.019-4.052 9.09-9.056 9.09S14.944 29.02 14.944 24s4.052-9.09 9.056-9.09zM18.58 24c0-3.014 2.429-5.454 5.42-5.454s5.42 2.44 5.42 5.454-2.429 5.455-5.42 5.455-5.42-2.44-5.42-5.455z" fill="currentColor"/></svg>',
            title:'系统设置',
            subTitle:'查看、修改和删除系统设置',
            link:'/setting'
          },
          {
            icon:'<svg width="60" height="60" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 5c9.389 0 17 7.611 17 17 0 3.549-1.087 6.844-2.947 9.57l6.782 6.782a1 1 0 010 1.414l-1.697 1.698a1 1 0 01-1.414 0l-6.604-6.605A16.934 16.934 0 0122 39c-9.389 0-17-7.611-17-17S12.611 5 22 5zm0 4.2C14.93 9.2 9.2 14.93 9.2 22S14.93 34.8 22 34.8 34.8 29.07 34.8 22 29.07 9.2 22 9.2z" fill="currentColor"/></svg>',
            title:'获取数据',
            subTitle:'使用爬虫获取各类信息和合并表格文件',
            link:'/crawler'
          },
        ],
        rightWidth:0,
        scrollData:{
          allWidth:0,
          rightDisplayNum:0,
          marginLeft:0,
        }
      }
    }
  },
  mounted(){
    const ws = new WebSocket(config.serverWSURL)
    this.ws = ws
    ws.onopen = (res) => {
      ws.send(tool.encodeString(JSON.stringify({
        token:this.bgData.loginedAdminInfo.token,
        operationName:'bgServerTime'
      })))
    }
    ws.onmessage = (res) => {
      let re = JSON.parse(decodeString(res.data))
      if(this.data.allowWSMsg==false){
        return
      }
      if(re.status==-2){
        this.data.allowWSMsg=false
        tool.axiosPostUnauthorized()
        return
      }
      switch (re.type) {
        case 'bgServerTime':
          this.data.all = re.results
          this.data.hhmmss = parseInt(re.results.slice(8,10)).toString() + ':' + re.results.slice(10,12) + ':' + re.results.slice(12,14)
          this.data.yyyymmdd = re.results.slice(0,4) + '年' + parseInt(re.results.slice(4,6)).toString() + '月' + parseInt(re.results.slice(6,8)).toString() + '日'
          break
      }
    }

    this.data.scrollData.allWidth = this.data.navButtons.length * 215 + 20
    setInterval(() => {
      try {
        this.data.rightWidth = document.getElementById('nav-button-wrapper').clientWidth
        this.data.scrollData.rightDisplayNum = parseInt(this.data.rightWidth/215)

        if(this.data.scrollData.allWidth - this.data.rightWidth + this.data.scrollData.marginLeft<0){
          this.data.scrollData.marginLeft = (this.data.scrollData.allWidth - this.data.rightWidth + 50)*-1
        }
        if(this.data.scrollData.marginLeft>0){
          this.data.scrollData.marginLeft = 0
        }
      } catch (error) {
        
      }
      
    }, 10);
  },
  methods:{
    rightMove(){
      this.data.scrollData.marginLeft -= this.getScrollWidth()
    },
    leftMove(){
      this.data.scrollData.marginLeft += this.getLeftScrollWidth()
    },
    getLeftScrollWidth(){
      let t = this.data.scrollData.rightDisplayNum * 215
      if(t> this.data.scrollData.marginLeft * -1){
        t = this.data.scrollData.marginLeft * -1
      }
      if(t<0){
        t=0
      }
      return t
    },
    getScrollWidth(){
      let t = this.data.scrollData.rightDisplayNum * 215
      if(t> this.data.scrollData.allWidth - this.data.rightWidth + this.data.scrollData.marginLeft){
        t = this.data.scrollData.allWidth - this.data.rightWidth + this.data.scrollData.marginLeft + 50
      }
      if(t<0){
        t=0
      }
      return t
    },
    navOpenLink(url){
      router.push('/bg' + url) 
    },
    getImageURL(url){
      return 'url(' + config.serverURL + '/download/' + url + ')'
    },
    axiosPost(url,data){
      return new Promise((resolve, reject) => {
        data = tool.encodeString(JSON.stringify(data));
        var config = {
           method: 'post',
           url: this.appData.serverURL + url,
           data : data
        };
        axios(config)
        .then((res) => {
          return resolve(JSON.parse(tool.decodeString(res.data)))
        })
      })
    },
  },
  props:{
    bgData:undefined,
    appData:undefined,
    changePageNavButton:undefined
  },
}
</script>

<style scoped>

.ctrlButton{
  position: absolute;
  color: var(--color-neutral-10);
  padding: 12px 3px;
  padding-bottom: 7px;
  top: calc((218px - 41.5px) / 2);
  background-color: var(--color-neutral-1);
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 1000;
}

.ctrlButton:hover{
  color: var(--color-neutral-8);
}

.nav-button{
  width: 200px;
  height: 220px;
  display: inline-block;
  margin-right: 15px;
  backdrop-filter: blur(20px);
  border-radius: 15px;
  border: 1px solid var(--color-neutral-3);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.nav-button:hover{
  border: 1px solid var(--color-neutral-5);
}

.nav-button:hover .nav-button-inside{
  background-color: var(--color-neutral-2);
}

.nav-button:active{
  border: 1px solid var(--color-neutral-3);
}

.nav-button-inside{
  width: 100%;
  height: 100%;
  background-color: var(--color-neutral-1);
  opacity: 0.8;
  transition: background-color .15s;
  padding: 20px 20px;
  position: absolute;
  left: 0;
  top: 0;
}

</style>